<template>
  <div class="search-main">
    <!-- 查询条件 -->
    <div class="top" ref="gridContent">
      <slot name="search"></slot>
    </div>
    <!-- 列表部分 -->
    <div class="middle">
      <slot name="table"></slot>
    </div>
    <!-- 分页部分 -->
    <slot class="page"></slot>

  </div>
</template>

<script>
export default {
  name: 'tlForm',
  created() {
    // console.log('----1', this.addOrUpdate)

  },
  props: {
    // 判断是 新增 还是 查询 - 默认是查询
    addOrUpdate: { type: Boolean, default: false }
  },
  mounted() {
    if (this.addOrUpdate) {
      this.$refs.gridContent.querySelectorAll('.el-form-item').forEach(element => {
        element.style.marginBottom = '22px'
      })
    } else {
      this.$refs.gridContent.querySelectorAll('.el-form-item').forEach(element => {
        element.style.marginBottom = '8px'
      })
    }
  }
}
</script>

<style scoped>
.search-main {
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

.top {
  background: rgb(233, 243, 249);
  /* border: 1px solid blue; */
  border-radius: 5px;
  padding-bottom: 5px;
}

.middle {
  background: rgb(233, 243, 249);
  /* border: 1px solid blue; */
  border-radius: 5px;
  margin-top: 10px;
}

.page {
  background: rgb(233, 243, 249);
  /* border: 1px solid blue; */
  border-radius: 5px;
  margin-top: 10px;

}

.el-form {
  padding: 0px 10px;
}

::v-deep .el-form-item {
  margin-bottom: 0px;
}
</style>